$height: var(--height_form);
$color1: var(--font_color_tip);
$color2: #ececec;
$color_adorn: #04b849;
$borderRadius: var(--borderRadius);

@mixin transition($type: all) {
  transition: $type .2s;
}

zj-radio{ display: inline-block; }
.zj-radio{
  line-height: 1;
  font-size: $height;
  color: $color2;
  height: .8em;
  width: 1.6em;
  border-radius: 1em;
  background-color: currentColor;
  display: flex;
  align-items: center;
  position: relative;
  .bgTrue,.bgFalse{
    height: 100%;
    @include transition(width);
  }
  .bgTrue{
    width: .5em;
    border-radius: 1em 0 0 1em;
    box-shadow: 0 0 .2em rgba(0, 0, 0, .3) inset;
    background-color: $color_adorn;
  }
  .bgFalse{
    width: calc(100% - .5em);
    border-radius: 0 1em 1em 0;
    box-shadow: 0 0 .2em rgba(0, 0, 0, .2) inset;
    background-color: $color2;
  }
  .radio{
    height: 1em;
    width: 1em;
    background-color: #fff;
    border-radius: inherit;
    border: 2rpx solid $color1;
    position: absolute;
    top: 50%; left: -2rpx;
    transform: translateY(-50%);
    @include transition(left);
  }
}
.zj-radio.selected{
  color: $color_adorn;
  .bgTrue{ width: calc(100% - .5em); }
  .bgFalse{ width: .5em; }
  .radio{ left: calc(100% - 1em + 2rpx); border-color: currentColor; }
}
.zj-radio.disabled{
  .radio{
    background-color: #f0f0f0 ;
  }
}